<template>
    <div class="top">
      <div class="topleft">
        <b>七日精选</b>
        <p>| &nbsp;&nbsp;月度看点</p>
      </div>
      <div class="topright">
        <!-- <p>日历<van-icon name="arrow" /></p> -->
      </div>
    </div>
    <ul>
      <li v-for="(item,index) in detail" :key="index">
        <div class="imgbox">
          <img :src="item.postUrlForShare" alt="">
          <p>{{item.cornerDisplayName}}</p>
          <b v-if="item.score=='0.0'"> </b>
          <b v-if="item.score!=='0.0'">{{item.score}}分</b>
        </div>
       
        <p class="short">{{item.shortName}}</p>
        <p class="price"><b>{{(item.priceRange).split("-")[0]}}</b>起</p>
      </li>
    </ul>
  
</template>

<script setup>

import axios from "@/api/axios.js";
import { ref } from "vue";
const getDetail = () => axios.get("https://show.maoyan.com/maoyansh/myshow/ajax/performances/calendar/0;pageNo=1;pageSize=40;st=10;timeFilterType=5?uuid=6074gamvnhk0bxpwvnzz95oqxeid9zl8z9wj1oj30cx8b20hrh1xknvnoxm2jyn7&clientType=1&os=1&sellChannel=13&cityId=1&lng=0&lat=0", {});
const detail = ref([]);

async function update() {
  const { data } = await getDetail();
  detail.value = data.data;
  // console.log("七天detail", detail);
  // return detail;
}
update();


</script>

<style lang="scss" scoped>
.top{
  display: flex;
  justify-content: space-between;
  .topleft{
    display: flex;
    b{
      font-size: 18rem;
      margin-right: 7rem;
    }
    p{
      font-size: 14rem;
      line-height: 24rem;
      color: #33333380;
    }
  }
}
ul{
  display:flex;
}
.imgbox {
  display: flex;
  margin: 0 5rem 0 0;
  width: 80rem;
  height: 108rem;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 12rem;
  }
  b {
    position: absolute;
    bottom: 5rem;
    left: 9rem;
    font-size: 14rem;
    color: #faaf00;
  }
  p {
    position: absolute;
    top: 2rem;
    right: 0rem;
    font-size: 13rem;
    padding: 0 6rem;
    transform: scale(0.8);
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
  }
}
.price {
  display: inline-flex;
  align-items: center;
  text-align: left;
  color: #999;
  font-weight: 700;
  font-size: 20rem;    
  white-space: nowrap;
  margin: 4rem 0;
  transform: scale(.5);
  transform-origin: left top;
  padding: 0 6rem;
  border-radius: 7rem;
  b{
    font-size: 20rem;
    transform: scale(1.4);
    color: #f03d37;
    margin-right: 8rem;
  }
}
.short {
  width: 80rem;
  height: 35rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>